﻿<div class="book">
    @if (Model.Header != null)
    {
        <header class="book-header">
            @await DisplayAsync(Model.Header)
        </header>
    }

    @if (Model.Cover != null)
    {
        <div class="book-cover">
            @await DisplayAsync(Model.Cover)
        </div>
    }
    @*
    @if (Model.Detail !=null)
    {
        <div class="book-detail">
            @await DisplayAsync(Model.Detail)
        </div>
    }
    *@
</div>

<style>
    .book {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .book-header {
        order: 1;
    }
    
    .book-cover {
        order: 2;
        text-align: center;
    }
    
    .bookTitle {
        font-size: 1.5em;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
    }
    
    .bookAuthor {
        font-size: 1.1em;
        color: #666;
        font-style: italic;
    }
    
    .bookCover img {
        max-width: 200px;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
</style>